<template>
  <div>
    <div class="set-meal">
      <div class="title">套餐详情</div>
      <div class="combo-list" v-if="goodsDetail">
        <block v-for="(item, index) in goodsDetail" :key="index">
          <div class="combo-item">
            <div class="combo-title">{{ item.name }}</div>
            <block v-for="(goodsItem, goodsIndex) in item.list" :key="goodsIndex">
              <div class="flex-j-sb combo-li">
                <div>{{ goodsItem.name }} ({{ goodsItem.count }}{{ goodsItem.unit }})</div>
                <div>¥{{ goodsItem.price }}</div>
              </div>
            </block>
          </div>
        </block>
      </div>
    </div>
    <div class="mb20"></div>
    <div class="purchase-notes">
      <div class="title">购买须知</div>
      <div class="purchase-content">
        <block v-for="(item, index) in goodsNotes" :key="index">
          <div class="purchase-item">
            <div class="subheading">{{ item.name }}</div>
            <block v-for="(explainItem, explainIndex) in item.list" :key="explainIndex">
              <div class="explain">{{ explainItem.text }}</div>
            </block>
          </div>
        </block>
        <div class="description">
          <van-collapse v-model="activeNames" @change="onChange" :border="false" custom-class="description">
            <van-collapse-item :title="pluginSetting.price_desc_name" name="1" custom-class="description" content-class="description" :is-link="false" :border="false">
              <!-- <div slot="title" class="titleClass">{{ pluginSetting.price_desc_name }}</div> -->
              <div slot="right-icon"><div class="iconfont" :class="activeNames == 1 ? 'icon-up' : 'icon-down'"></div></div>
              <div v-html="priceDesc"></div>
            </van-collapse-item>
            <van-collapse-item :title="pluginSetting.notice_desc_name" name="2" :is-link="false" :border="false" custom-class="description" content-class="description">
              <div slot="right-icon"><div class="iconfont" :class="activeNames == 2 ? 'icon-up' : 'icon-down'"></div></div>
              <div v-html="noticeDesc"></div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import purchaseNotes_controller from "./purchaseNotes_controller.js";
export default purchaseNotes_controller;
</script>
<style scoped>
.van-collapse-item__title .spread-img {
  width: 0.4375rem;
  height: 0.2188rem;
}

.description ::v-deep .van-cell {
  background-color: #f8f8fa;
}

.description ::v-deep .van-collapse-item__content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}

.description ::v-deep .van-collapse-item__content {
  background-color: #f8f8fa;
}

.purchase-content .van-collapse-item__title {
  background-color: #f8f8fa;
}
</style>
<style lang="scss" scoped>
/* 套餐详情 */
.mb20 {
  height: 0.625rem;
  clear: both;
}

.set-meal {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.75rem 0.625rem 0.7813rem 0.625rem;
  border-radius: 0.3125rem;

  .title {
    font-size: 1.0625rem;
    color: #222;
    margin: 0 0 1.375rem 0;
    text-align: left;
  }
}

.combo-item {
  .combo-title {
    font-size: 0.9375rem;
    color: #222;
    margin: 0 0 0.75rem 0;
    text-align: left;
  }

  .combo-li {
    font-size: 0.75rem;
    color: #888;
    position: relative;
    padding: 0 0 0 0.4688rem;
    margin: 0 0 0.75rem 0;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.125rem;
      height: 0.125rem;
      background-color: #222;
    }
  }
}

/* 购买须知 */

.purchase-notes {
  margin: 0 0.625rem;
  padding: 0.75rem 0.625rem 0.7813rem 0.625rem;
  background-color: #fff;
  border-radius: 0.3125rem;

  .title {
    font-size: 1.0625rem;
    color: #222;
    margin: 0 0 1.375rem 0;
    text-align: left;
  }
}

.purchase-item {
  margin: 0 0 1.375rem 0;

  .subheading {
    font-size: 0.9375rem;
    color: #222;
    margin: 0 0 0.625rem 0;
    text-align: left;
  }

  .explain {
    font-size: 0.75rem;
    color: #555;
    position: relative;
    padding: 0 0 0 0.625rem;
    margin: 0 0 0.5rem 0;
    text-align: left;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.3125rem;
      height: 0.3125rem;
      border-radius: 50%;
      background-color: #555;
    }
  }
}

.description {
  background-color: #f8f8fa !important;

  div {
    background-color: #f8f8fa !important;
  }
}
</style>
